<template>
  <div
    class="absolute top-0 bottom-0 left-0 right-0 overflow-y-auto bg-no-repeat bg-center bg-cover bg-[url(https://kposshzcdn.ckjr001.com/admin/material/14_material_admin/image/assets/loginBanner/homepage_basemap.png)]"
  >
    <div
      class="overflow-auto pb-15 absolute left-0 min-h-730 size-full flex flex-col justify-between"
    >
      <div class="pt-15 pl-15 mp-ph0 mp-pb0 mp-textAlign-c">
        <a href="http://www.ckjr001.com" target="blank">
          <img src="@/assets/logo/logo.svg" height="28" alt="" srcset="" />
        </a>
      </div>
      <div class="mt-0 mb-0 ml-auto mr-auto flex rounded-10 overflow-hidden mp-w100 mp-mt20">
        <div class="w-500 h-500 mr-100 mp-hide">
          <img
            v-if="loginPageConfigImage"
            :src="loginPageConfigImage"
            class="size-full"
            alt=""
            srcset=""
          />
        </div>
        <div
          class="w-500 h-500 bg-white p-50 rounded-12 shadow-[0_2px_8px_0_rgba(0,0,0,0.02)] mp-w100"
        >
          <div class="text-32 text-333333 font-bold mb-17">欢迎来到创客匠人</div>
          <div class="flex mb-28">
            <div
              v-for="(item, index) in loginTypeOption"
              :key="index"
              class="pb-7 mr-30 text-center text-16 cursor-pointer"
              :class="
                loginType === item.value
                  ? 'border-b-2 border-solid border-accent-color text-accent-color font-bold'
                  : 'text-333333'
              "
              @click="changeLoginType(item)"
            >
              {{ item.label }}
            </div>
          </div>
          <el-form ref="loginFormRef" :model="loginFormData" :rules="loginRules">
            <template v-if="loginType == 'password'">
              <el-form-item prop="userName">
                <el-input
                  v-model="loginFormData.userName"
                  size="large"
                  placeholder="请输入账号或手机号码"
                />
              </el-form-item>
              <el-form-item class="relative" prop="password">
                <el-input
                  v-model="loginFormData.password"
                  size="large"
                  name="password"
                  :type="passwordType"
                  autocomplete="off"
                  placeholder="请输入密码"
                />
                <span
                  class="h-full leading-44 absolute right-15 top-0 text-16 text-889aa4 cursor-pointer select-none"
                  @click="showPwd"
                >
                  <svg-icon v-if="invisible" icon-class="eye" />
                  <el-icon v-else><View /></el-icon>
                </span>
              </el-form-item>
            </template>
            <div>
              <el-button
                v-loading.fullscreen.lock="fullscreenLoading"
                class="w-full shadow-[0_5px_15px_0_rgba(64,158,255,0.2)]"
                size="large"
                type="primary"
                @click.native.prevent="handleLogin"
              >
                {{ $t("login.login") }}
              </el-button>
            </div>
          </el-form>
        </div>
      </div>
      <div class="text-center text-999999 text-14 mt-10">
        <div class="pb-10">{{ $t("systemDesc") }}</div>
        <div>{{ $t("systemCopyright") }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import AuthAPI, { type LoginFormData } from "@/api/auth";
import { FormInstance } from "element-plus";
import { isPhoneNumber } from "@/utils";
const { t } = useI18n();
import { useUserStore } from "@/store";
import router from "@/router";
// 登录页图片
const loginPageConfigImage = ref<string>(
  "https://knowledge-payment.oss-cn-beijing.aliyuncs.com/loginPageConfig/2025-02-27/clJ2blmPVD12g7LHWxxt0mqQNFL313uDX0Jbrwnz.png?x-oss-process=style/common"
);
// 用户状态管理器
const userStore = useUserStore();
// 表单Ref
const loginFormRef = ref<FormInstance>();
// 登录类型列表
const loginTypeOption = ref<OptionType[]>([{ label: "密码登录", value: "password" }]);
// 选择登录类型
const loginType = ref<string>("password");
//改变登录类型
function changeLoginType(item: OptionType) {
  loginType.value = item.value as string;
  loginFormRef.value?.clearValidate();
}
// 登录表单参数
const loginFormData = ref<LoginFormData>({
  mobile: "",
  userName: "",
  password: "",
  code: "",
});
const loginRules = computed(() => {
  return {
    userName: [
      {
        required: true,
        trigger: "blur",
        message: t("login.message.userName.required"),
      },
    ],
    password: [
      {
        required: true,
        trigger: "blur",
        message: t("login.message.password.required"),
      },
    ],
  };
});
// 密码类型
const passwordType = ref<string>("password");
// 是否显示密码
const invisible = ref<boolean>(true);
// 是否点击登录
const fullscreenLoading = ref<boolean>(false);
// 显示隐藏密码方法
const showPwd = () => {
  if (passwordType.value === "password") {
    passwordType.value = "";
    invisible.value = false;
  } else {
    passwordType.value = "password";
    invisible.value = true;
  }
};
// 登录方法
const handleLogin = () => {
  // 如果登录方式为验证码登录判断是否输入正确的手机号
  if (loginType.value === "code" && !isPhoneNumber(loginFormData.value.mobile)) {
    ElMessage.warning("请填写正确的手机号");
    return;
  }
  // 验证表单参数是否正确
  loginFormRef.value?.validate((valid: boolean) => {
    if (valid) {
      if (fullscreenLoading.value) return;
      fullscreenLoading.value = true;
      userStore
        .login(loginFormData.value)
        .then(async (res) => {
          fullscreenLoading.value = false;
          getUserInfo();
        })
        .catch(() => {
          fullscreenLoading.value = false;
        });
    } else {
      fullscreenLoading.value = false;
    }
  });
};
// 获取用户信息
const getUserInfo = () => {
  userStore.getUserInfo().then((data) => {
    router.push("/");
  });
};
</script>

<style scoped lang="scss"></style>
